<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>系统更新器</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="module/all.css"/>
</head>
<body>
<div class="layui-container">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">文件列表</div>
                <div class="layui-card-body gen-history-list" style="min-height: 375px;">
                    <div class="gen-empty-view">
                        <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
                        <p>加载中...</p>
                    </div>
                </div>
                <button id="btnUploadTpl" class="layui-btn layui-btn-fluid layui-btn-primary">
                    <i class="layui-icon">&#xe681;</i><span>上传压缩文件</span>
                </button>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header">更新系统</div>
                <div class="layui-card-body" style="padding-top: 20px;">
                    <div class="layui-tab layui-steps layui-steps-readonly" lay-filter="generatorTab"
                         style="visibility: hidden;">
                        <ul class="layui-tab-title">
                        </ul>
                        <div class="layui-tab-content">
                            <!-- 第一步 -->
                            <div class="layui-tab-item layui-form layui-show" lay-filter="generatorFrom1">
                                <div class="gen-from-body">
                                    <div class="layui-form-item" style="margin-top: 50px;">
                                        <label class="layui-form-label layui-form-required">选择系统:</label>
                                        <div class="layui-input-block">
                                            <select name="systemType">
                                                <option value="ses">内部系统</option>
                                                <option value="ses-out">外部系统</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label layui-form-required">选择文件:</label>
                                        <div class="layui-input-block">
                                            <select name="filePath" lay-verify="required" required>
                                                <option value="">请选择文件</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" lay-filter="execute" lay-submit>执行更新</button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- js部分 -->
<script type="text/javascript" src="layui/layui.js"></script>
<script>
    layui.config({base: 'module/'}).use(['form', 'xmSelect', 'laytpl', 'steps', 'dropdown', 'util', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var xmSelect = layui.xmSelect;
        var laytpl = layui.laytpl;
        var steps = layui.steps;
        var util = layui.util;
        var upload = layui.upload;
        var tableInfos = [];   // 表信息
        var tbSelIns = [];  // 多选下拉实例
        var formData1 = {}, formData2 = {};  // 表单数据
        var isGoLast = false;  // 是否跳转到最后一步
        $('[lay-filter="generatorTab"]').css('visibility', 'visible');

        /* 获取文件列表 */
        function getTplList() {
            var $list = $('.gen-tpl-list');
            changeEmptyView($list.children('.gen-empty-view'), '加载中...', 0);
            $.get('api/manager/list', function (res) {
                if (0 === res.code) {
                    var $sel = $('[lay-filter="generatorFrom1"] select[name="filePath"]');
                    if (res.data.length === 0) {
                        changeEmptyView($list.children('.gen-empty-view'), '无数据', 1);
                        $sel.html('<option value="">选择文件</option>');
                    } else {
                        $list.html('');
                        $sel.html('');
                        res.data.forEach(function (item) {
                            $sel.append('<option value="' + item.name + '">' + item.name + '</option>');
                            var html = '<div class="tpl-list-item">';
                            html += '      <i class="layui-icon">&#xe628;</i><span class="title">' + item.name + '</span>';
                            html += '      <span class="time">' + item.size / 1000 + 'kb</span>';
                            html += '   </div>';
                            $list.append(html);
                        });
                        form.render('select', 'generatorFrom1');
                    }
                } else {
                    changeEmptyView($list.children('.gen-empty-view'), res.msg, 2);
                }
            });
        }

        getTplList();

        function deleteFile(filename){
            layer.msg("test");
            $.get('api/manager/delete?file='+filename, function (res) {
                if (0 === res.code) {
                    layer.msg("删除成功");
                    getHistoryList();
                }
            });
        }

        /* 获取生成记录 */
        function getHistoryList() {
            var $list = $('.gen-history-list');
            changeEmptyView($list.children('.gen-empty-view'), '加载中...', 0);
            $.get('api/manager/list', function (res) {
                if (0 === res.code) {
                    if (res.data.length === 0) {
                        changeEmptyView($list.children('.gen-empty-view'), '没有上传记录', 1);
                    } else {
                        $list.html('');
                        res.data.forEach(function (item) {
                            var html = '<div class="history-list-item">';
                            html += '      <i class="layui-icon">&#xe60a;</i><span class="title">' + item.name + '</span>';
                            html += '      <span class="time">' + item.size / 1000 + 'kb</span>';
                            html += '      <span><a target="_blank" href="api/manager/download?file=' + item.name+'">下载 </a></span>';
                            html += '      <span><a target="_blank" href="api/manager/delete?file=' + item.name+'"> 删除</a></span>';
                            html += '   </div>';
                            $list.append(html);
                        });
                    }
                } else {
                    changeEmptyView($list.children('.gen-empty-view'), res.msg, 2);
                }
            });
        }

        getHistoryList();

        $(document).on('click','#cleanPath',function(){
            var path=document.getElementById("targetPath");
            if(path.value===null){
                layer.msg("目标路径为空");
            }
            var cmd="rm -rf "+path.value+"/*";
            $.ajax({
                url: 'api/manager/exec',
                data: cmd,
                method: 'post',
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    if (0 === res.code) {
                        layer.msg('执行成功', {icon: 1});
                    } else {
                        layer.alert(res.msg || '执行失败，请检查失败原因~', {title: '执行失败', icon: 2, shade: 0.01});
                    }
                },
                error: function (xhr) {
                    layer.msg(xhr.status + ': ' + xhr.statusText, {icon: 2, anim: 6});
                }
            });
        });

        /* 切换空视图状态 */
        function changeEmptyView(view, text, type) {
            var $empty = $(view);
            $empty.children('p').text(text);
            if (type === 0) {  // 加载中
                $empty.children('.layui-icon').addClass('layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop');
                $empty.children('.layui-icon').removeClass('layui-icon-face-cry layui-icon-face-surprised');
            } else if (type === 1) {  // 空数据
                $empty.children('.layui-icon').removeClass('layui-icon-face-cry layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop');
                $empty.children('.layui-icon').addClass('layui-icon-face-surprised');
            } else {  // 错误
                $empty.children('.layui-icon').removeClass('layui-icon-face-surprised layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop');
                $empty.children('.layui-icon').addClass('layui-icon-face-cry');
            }
        }

        // 表单提交
        form.on('submit(execute)', function (data) {
            var loadIndex = layer.msg('正在执行中，请稍后...', {icon: 16, shade: 0.01, time: false});
            $.ajax({
                url: 'api/manager',
                data: JSON.stringify(data.field),
                method: 'post',
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    layer.close(loadIndex);
                    if (0 === res.code) {
                        layer.msg('执行成功，请稍等几秒后刷新系统...', {icon: 1});
                    } else {
                        layer.alert(res.msg || '执行失败，请检查失败原因~', {title: '生成失败', icon: 2, shade: 0.01});
                    }
                },
                error: function (xhr) {
                    layer.close(loadIndex);
                    layer.msg(xhr.status + ': ' + xhr.statusText, {icon: 2, anim: 6});
                }
            });
            return false;
        });

        /* 上传模板 */
        upload.render({
            elem: '#btnUploadTpl',
            url: 'api/manager/upload',
            accept: 'file',
            before: function (obj) {
                layer.msg('正在上传中，请稍后...', {icon: 16, shade: 0.01, time: false});
            },
            done: function (res) {
                layer.closeAll('loading');
                if (0 === res.code) {
                    layer.msg(res.msg, {icon: 1});
                    getTplList();
                    getHistoryList();
                } else {
                    layer.msg(res.msg, {icon: 2, anim: 6});
                }
            },
            error: function () {
                layer.closeAll('loading');
                layer.msg('上传失败', {icon: 2, anim: 6});
            }
        });

    });
</script>
</body>
</html>